import 'dart:math' as math;

import 'package:flutter/material.dart';
import 'package:flutter_application_testview/fitness_app/fitness_app_theme.dart';
import 'package:vector_math/vector_math.dart' as vector;
class WaveView extends StatefulWidget {
  final double percentageValue;
  final Color waveColor; // 新增颜色参数

   const WaveView({
    Key? key, 
    this.percentageValue = 100.0,
    required this.waveColor, // 必需参数
  }) : super(key: key);
  @override
  _WaveViewState createState() => _WaveViewState();
}

class _WaveViewState extends State<WaveView> with TickerProviderStateMixin {
  AnimationController? animationController;
  AnimationController? waveAnimationController;
  Offset bottleOffset1 = Offset(0, 0);
  List<Offset> animList1 = [];
  Offset bottleOffset2 = Offset(60, 0);
  List<Offset> animList2 = [];

  @override
  void initState() {
    animationController = AnimationController(
        duration: Duration(milliseconds: 2000), vsync: this);
    waveAnimationController = AnimationController(
        duration: Duration(milliseconds: 2000), vsync: this);
    
    animationController!
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          animationController?.reverse();
        } else if (status == AnimationStatus.dismissed) {
          animationController?.forward();
        }
      });

    waveAnimationController!.addListener(() {
      final containerHeight = 160;
      final fillHeight = containerHeight * (widget.percentageValue / 100);

      animList1.clear();
      for (int i = -2 - bottleOffset1.dx.toInt(); i <= 60 + 2; i++) {
        animList1.add(
          Offset(
            i.toDouble() + bottleOffset1.dx,
            math.sin((waveAnimationController!.value * 360 - i) % 360 * 
                    vector.degrees2Radians) * 4 + 
                (containerHeight - fillHeight),
          ),
        );
      }

      animList2.clear();
      for (int i = -2 - bottleOffset2.dx.toInt(); i <= 60 + 2; i++) {
        animList2.add(
          Offset(
            i.toDouble() + bottleOffset2.dx,
            math.sin((waveAnimationController!.value * 360 - i) % 360 * 
                    vector.degrees2Radians) * 4 + 
                (containerHeight - fillHeight),
          ),
        );
      }
    });

    waveAnimationController?.repeat();
    animationController?.forward();
    super.initState();
  }

  @override
  void dispose() {
    animationController?.dispose();
    waveAnimationController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 60,
      height: 160,
      child: AnimatedBuilder(
        animation: CurvedAnimation(
          parent: animationController!,
          curve: Curves.easeInOut,
        ),
        builder: (context, child) => Stack(
          children: <Widget>[
            // 波浪层
            ClipRRect(
              borderRadius: BorderRadius.circular(15),
              child: Stack(
                children: [
                  Positioned.fill(
                    child: ClipPath(
                      clipper: WaveClipper(animationController!.value, animList1),
                      child: Container(
                        decoration: BoxDecoration(
                          gradient: LinearGradient(
                            colors: [
                             widget.waveColor.withOpacity(0.5), // 使用动态颜色
                      widget.waveColor.withOpacity(0.2)
                            ],
                            begin: Alignment.topLeft,
                            end: Alignment.bottomRight,
                          ),
                        ),
                      ),
                    ),
                  ),
                  Positioned.fill(
                    child: ClipPath(
                      clipper: WaveClipper(animationController!.value, animList2),
                      child: Container(
                        decoration: BoxDecoration(
                          gradient: LinearGradient(
                            colors: [
                              widget.waveColor.withOpacity(0.8), // 使用动态颜色
                      widget.waveColor.withOpacity(0.4)
                            ],
                            begin: Alignment.topLeft,
                            end: Alignment.bottomRight,
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            
            // 百分比显示
            Center(
              child: Padding(
                padding: const EdgeInsets.only(top: 24),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Text(
                      widget.percentageValue.round().toString(),
                      style: TextStyle(
                        fontFamily: FitnessAppTheme.fontName,
                        fontWeight: FontWeight.w500,
                        fontSize: 24,
                        color: FitnessAppTheme.white,
                      ),
                    ),
                    Text(
                      '%',
                      style: TextStyle(
                        fontFamily: FitnessAppTheme.fontName,
                        fontWeight: FontWeight.w500,
                        fontSize: 14,
                        color: FitnessAppTheme.white,
                      ),
                    ),
                  ],
                ),
              ),
            ),

            // 装饰性动画元素
            ..._buildDecorations(),
          ],
        ),
      ),
    );
  }

  List<Widget> _buildDecorations() {
    return [
      Positioned(
        top: 0,
        left: 6,
        child: ScaleTransition(
          scale: Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(
            parent: animationController!,
            curve: Interval(0.0, 1.0, curve: Curves.fastOutSlowIn),
          )),
          child: _buildBubble(),
        ),
      ),
      Positioned(
        left: 24,
        bottom: 16,
        child: ScaleTransition(
          scale: Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(
            parent: animationController!,
            curve: Interval(0.4, 1.0, curve: Curves.fastOutSlowIn),
          )),
          child: _buildBubble(),
        ),
      ),
      Positioned(
        right: 24,
        bottom: 32,
        child: ScaleTransition(
          scale: Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(
            parent: animationController!,
            curve: Interval(0.6, 0.8, curve: Curves.fastOutSlowIn),
          )),
          child: _buildBubble(size: 3),
        ),
      ),
    ];
  }

  Widget _buildBubble({double size = 4}) {
    return Container(
      width: size,
      height: size,
      decoration: BoxDecoration(
        color: FitnessAppTheme.white.withOpacity(0.4),
        shape: BoxShape.circle,
      ),
    );
  }
}




class WaveClipper extends CustomClipper<Path> {
  final double animation;
  final List<Offset> waveList1;

  WaveClipper(this.animation, this.waveList1);

  @override
  Path getClip(Size size) {
    final path = Path()
      ..addPolygon(waveList1, false)
      ..lineTo(size.width, size.height)
      ..lineTo(0, size.height)
      ..close();
    return path;
  }

  @override
  bool shouldReclip(WaveClipper oldClipper) =>
      animation != oldClipper.animation || waveList1 != oldClipper.waveList1;
}
